<template>
  <div class="resourceInfo">
    <template v-for="(resource, i) in resourceList">
      <div class="resourceBlock" :key="i">
        <div class="resourceLeft">
          <img :src="resource.resourceImg" alt />
        </div>
        <div class="resourceRight" v-if="resource.name == 'hdfs'">
          <div>
            <span class="blue">{{resource.usedProportion}}/</span>
            <span>{{resource.totalProportion}}</span>
          </div>
          <div>
            <span>占用百分比:</span>
            <span>{{resource.percentage}}%</span>
          </div>
          <div class="percentageCont">
            <el-progress
              :percentage="resource.percentage"
              :text-inside="true"
              :stroke-width="14"
              :format="format"
            ></el-progress>
          </div>
        </div>
        <div class="resourceRight alignStart" v-if="resource.name == 'hbase'">
          <div v-if="resource.libraryNums != '' || resource.libraryNums != null">
            <span>库数目&nbsp;&nbsp;</span>
            <span>{{resource.libraryNums}}个</span>
          </div>
          <div v-if="resource.tableNums != '' || resource.tableNums != null">
            <span>表数目&nbsp;&nbsp;</span>
            <span>{{resource.tableNums}}个</span>
          </div>
        </div>
        <div class="resourceRight alignStart" v-if="resource.name == 'hive'">
          <div v-if="resource.libraryNums != '' || resource.libraryNums != null">
            <span>库数目&nbsp;&nbsp;</span>
            <span>{{resource.libraryNums}}个</span>
          </div>
          <div v-if="resource.tableNums != '' || resource.tableNums != null">
            <span>表数目&nbsp;&nbsp;</span>
            <span>{{resource.tableNums}}个</span>
          </div>
        </div>
        <div class="resourceRight alignStart" v-if="resource.name == 'kafka'">
          <div v-if="resource.themeNums != '' || resource.themeNums != null">
            <span>主题数目&nbsp;&nbsp;</span>
            <span>{{resource.themeNums}}个</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
const hdfsImg = require("@/assets/image/hdfs.png");
const hbaseImg = require("@/assets/image/hbase.png");
const hiveImg = require("@/assets/image/hive.png");
const kafkaImg = require("@/assets/image/kafka.png");
export default {
  name: "ResourceInfo",
  props: {
    resource: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      resourceList: [
        {
          name: "hdfs",
          resourceImg: hdfsImg,
          totalProportion: 0,
          usedProportion: 0,
          percentage: 0
        },
        {
          name: "hbase",
          resourceImg: hbaseImg,
          libraryNums: 0,
          tableNums: 0
        },
        {
          name: "hive",
          resourceImg: hiveImg,
          libraryNums: 0,
          tableNums: 0
        },
        {
          name: "kafka",
          resourceImg: kafkaImg,
          themeNums: 0
        }
      ]
    };
  },
  computed: {
    ...mapState(["installedServices"])
  },
  watch: {
    // 监听sitution值是否传到
    resource: {
      handler() {
        this.homeInfo();
      }
    },
    deep: true
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    // 获取首页数据
    homeInfo: function() {
      const resource = this.resource;
      this.resourceList[0].totalProportion = resource.hdfsTotal
        ? resource.hdfsTotal
        : 0;
      this.resourceList[0].usedProportion = resource.hdfsUsed
        ? resource.hdfsUsed
        : 0;
      this.resourceList[0].percentage = resource.hdfsPercent
        ? resource.hdfsPercent
        : 0;
      this.resourceList[1].libraryNums = resource.hbaseSpaceNum
        ? resource.hbaseSpaceNum
        : 0;
      this.resourceList[1].tableNums = resource.hbaseTableNum
        ? resource.hbaseTableNum
        : 0;
      this.resourceList[2].libraryNums = resource.hiveSpaceNum
        ? resource.hiveSpaceNum
        : 0;
      this.resourceList[2].tableNums = resource.hiveTableNum
        ? resource.hiveTableNum
        : 0;
      this.resourceList[3].themeNums = resource.kafkaTopicNum
        ? resource.kafkaTopicNum
        : 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.resourceInfo {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .resourceBlock {
    min-width: 24%;
    max-width: 25%;
    height: 120px;
    border: 1px solid #dcdfe6;
    background: #fff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;
    .resourceLeft {
      width: 40%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 90%;
      }
    }
    .resourceRight {
      width: 60%;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-evenly;
      align-items: center;
      .blue {
        color: #409eff;
      }
      .percentageCont {
        width: 90%;
      }
    }
    .alignStart {
      align-items: flex-start;
      padding-left: 20px;
    }
  }
}
</style>
<style lang="scss">
.el-progress-bar__innerText {
  color: #606266;
}
</style>